/*
  学习目标：使用useEffect发送请求
  步骤：
     1. 把挂载后的生命周期
     2. 在挂载后发请求
*/

import React, { useEffect, useState } from 'react';
import request from './utils/request';

export default function App() {
  const [list, setList] = useState([]);
  const loadData = async () => {
    const res = await request({ url: '/v1_0/channels' });
    setList(res.data.channels);
  };

  // ✅
  useEffect(() => {
    loadData();
  }, []);

  // ❌ useEffect接收的回调函数，要求是同步函数，不能是异步函数
  // useEffect( async () => {

  // }, []);

  return (
    <div>
      <ul>
        {list.map((item) => {
          return <li key={item.id}>{item.name}</li>;
        })}
      </ul>
    </div>
  );
}

//  下包axios
// 2. 封装utils/request.js
// 3. 挂载后发情求
